<!--轴的临界转速计算-->
<template>
    <div class="borde" style="width: 100%; height: 100%;font-size: 16px;display: flex;">
        <a-row class="all_row">
            <div class="top">
                <div style="width: 100%;height: 100%;position: relative">
                    <div class="top_left">
                        <div style="width: 100%;height: 100%;">
                            <div class="top_left_top">
                                <div style="width: 100%;height: 100%;">
                                    <div class="top_left_top_title">轴参数</div>
                                    <div class="top_left_top_body">
                                        <div style="width: 100%;height: 100%;position: relative">
                                            <div class="top_left_top_left">
                                                <div style="width: 100%;height: 100%;position: relative">
                                                    <div class="top_left_top_left_left">
                                                        <div style="width: 100%;height: 100%;position: relative">
                                                            <ul class="top_left_top_left_left_list">
                                                                <li>轴段数</li>
                                                                <li>弹性模量(MPa)</li>
                                                                <li>泊松比</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="top_left_top_left_right">
                                                        <div style="width: 100%;height: 100%;position: relative">
                                                            <ul class="top_left_top_left_right_list">
                                                                <li>
                                                                    <input v-model="params_20.section_n" style="width: 80%;height: 70%;text-align: center"/>
                                                                </li>
                                                                <li>
                                                                    <input v-model="params_20.elastic    " style="width: 80%;height: 70%;text-align: center"/>
                                                                </li>
                                                                <li>
                                                                    <input v-model="params_20.possion_ratio" style="width: 80%;height: 70%;text-align: center"/>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="top_left_top_right">
                                                <div style="width: 100%;height: 100%;position: relative">
                                                    <div class="top_left_top_right_body">
                                                        <div  style="width: 100%;height: 100%;position: relative">
                                                            <button @click="isvisible_1"
                                                                    style="width: 30%;height: 90%;position: absolute;left: 20%;padding-left: 2px;padding-right: 2px;">输入轴尺寸</button>
                                                            <a-modal   v-for="(it,index) in visible_1" :key="it.id" v-model="visible_1[index].value" :title="myTitle_1(index+1)" @ok="handleOk_1(index+1)">
                                                                <ul style="height: 100%">
                                                                    <li style="margin-bottom: 3%">
                                                                        第{{index+1}}段轴的长度(mm)<br>
                                                                        <input v-model="temp_shaft_segment[0]"  style="width: 90%" type="text"/>

                                                                    </li>
                                                                    <li style="margin-bottom: 3%">
                                                                        第{{index+1}}段轴的外径(mm)<br>
                                                                        <input v-model="temp_shaft_segment[1]"  style="width: 90%" type="text"/>
                                                                    </li>
                                                                    <li style="margin-bottom: 3%">
                                                                        第{{index+1}}段轴的内径(mm)<br>
                                                                        <input v-model="temp_shaft_segment[2]"  style="width: 90%" type="text"/>
                                                                    </li>
                                                                    <li style="margin-bottom: 3%">
                                                                        第{{index+1}}段轴的网格数<br>
                                                                        <input v-model="temp_shaft_segment[3]"  style="width: 90%" type="text"/>
                                                                    </li>
                                                                    <li style="margin-bottom: 3%">
                                                                        第{{index+1}}段轴的剪切变形影响因子<br>
                                                                        <input v-model="temp_shaft_segment[4]"  style="width: 90%" type="text"/>
                                                                    </li>
                                                                    <li style="margin-bottom: 3%">
                                                                        第{{index+1}}段轴的密度(t/mm3)<br>
                                                                        <input v-model="temp_shaft_segment[5]"  style="width: 90%" type="text"/>
                                                                    </li>
                                                                </ul>
<!--                                                                <div style="width: 100%;height: 100%">-->
<!--                                                                    index = {{index+1}}-->
<!--                                                                    it = {{it}}-->
<!--                                                                </div>-->
                                                            </a-modal>

                                                            <button @click="showModal"
                                                                    style="width: 30%;height: 90%;position: absolute;left: 60%">查看</button>
                                                            <a-modal title="" :visible="visible" width="850px"
                                                                     :confirm-loading="confirmLoading"
                                                                     @ok="handleOk" @cancel="handleCancel">
                                                                <div style="height: 100%;width: 100%">
                                                                    <el-table
                                                                            height="255" border  stripe
                                                                            :data="ans.dataSource"
                                                                            :row-style="{height:'15px'}"
                                                                            :cell-style="{padding:'0px'}"
                                                                            :header-cell-style="{height:'10px',padding:'0px'}"
                                                                            style="width: 100%;height: 100%;font-size: 10px;">
                                                                        <el-table-column
                                                                                prop="0" label="序号" width="50" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="1" label="网格长度(mm)" width="100" h>
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="2" label="外径(mm)" width="80" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="3" label="内径(mm)" width="80" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="4" label="弹性模量(Mpa)" width="120" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="5" label="泊松比" width="70" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="6" label="剪切变形影响因子" width="120" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="7" label="距离(mm)" width="80" >
                                                                        </el-table-column>
                                                                        <el-table-column
                                                                                prop="8" label="密度(kg/l)" >
                                                                        </el-table-column>
                                                                    </el-table>
                                                                </div>
                                                            </a-modal>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="top_left_bottom">
                                <div style="width: 100%;height: 100%;">
                                    <div class="top_left_bottom_title">轴承参数</div>
                                    <div class="top_left_bottom_body">
                                        <div style="width: 100%;height: 100%;">
                                            <div class="top_left_bottom_top">
                                                <div style="width: 100%;height: 100%;position: relative">
                                                    <label style="width: 15%;height: 55%;position: absolute;left: 10%;top: 20%">轴承个数</label>
                                                    <div style="width: 15%;height: 55%;position: absolute;left: 25%;top: 20%">
                                                        <input v-model="params_20.bearing_number" style="width: 100%;height: 100%;text-align: center"/>
                                                    </div>
                                                    <div style="width: 15%;height: 55%;position: absolute;left: 42.5%;top: 20%">
                                                        <button @click="isvisible_2"
                                                                style="width: 100%;height: 100%;padding-left: 2px;padding-right: 2px;">添加轴承</button>
                                                        <a-modal   v-for="(it,index) in visible_2" :key="it.id" v-model="visible_2[index].value" :title="myTitle_2(index+1)" @ok="handleOk_2(index+1)">
                                                            <ul style="height: 100%">
                                                                <li style="margin-bottom: 3%">
                                                                    第{{index+1}}轴承距轴左端的距离(mm)<br>
                                                                    <input v-model="temp_bearing[0]"  style="width: 90%" type="text"/>

                                                                </li>
                                                                <li style="margin-bottom: 3%">
                                                                    第{{index+1}}轴承的径向刚度(N/mm)<br>
                                                                    <input v-model="temp_bearing[1]"  style="width: 90%" type="text"/>
                                                                </li>
                                                                <li style="margin-bottom: 3%">
                                                                    第{{index+1}}轴承的倾斜刚度(Nmm/rad)<br>
                                                                    <input v-model="temp_bearing[2]"  style="width: 90%" type="text"/>
                                                                </li>
                                                            </ul>
                                                        </a-modal>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="top_left_bottom_bottom">
                                                <div  style="width: 100%;height: 100%;position: relative">
                                                    <div class="top_left_bottom_bottom_left">
                                                        <div style="width: 100%;height: 100%;position: relative">
                                                            <div class="top_left_bottom_bottom_left_label">轴承</div>
                                                        </div>
                                                    </div>
                                                    <div class="top_left_bottom_bottom_right">
                                                        <div style="width: 100%;height: 100%;">
                                                            <div class="top_left_bottom_bottom_right_table">
                                                                <el-table
                                                                          height="155" border  stripe
                                                                          :data="ans.dataSource1"
                                                                          :row-style="{height:'15px'}"
                                                                          :cell-style="{padding:'0px'}"
                                                                          :header-cell-style="{height:'10px',padding:'0px'}"
                                                                          style="width: 95%;height: 100%;font-size: 10px;">
                                                                    <el-table-column
                                                                            prop="0" label="序号" width="50" >
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            prop="1" label="网格面" width="60" h>
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            prop="2" label="径向刚度(N/mm)" width="150" >
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            prop="3" label="倾斜刚度(Nmm/rad)" width="150" >
                                                                    </el-table-column>
                                                                    <el-table-column
                                                                            prop="4" label="位置(mm)" >
                                                                    </el-table-column>
                                                                </el-table>
                                                            </div>
                                                            <div class="top_left_bottom_bottom_right_button">
                                                                <div style="width: 100%;height: 100%;position: relative">
<!--                                                                    <button style="width: 20%;height: 90%;position: absolute;right: 5%;padding-left: 2px;padding-right: 2px;">计算轴承</button>-->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="top_middle"></div>
                    <div class="top_right"></div>
                </div>
            </div>
            <div class="bottom">
                <div style="width: 100%;height: 100%;position: relative">
                    <div class="bottom_left">
                        <div style="width: 100%;height: 100%;">
                            <div class="bottom_left_title">质量块参数</div>
                            <div class="bottom_left_body">
                                <div style="width: 100%;height: 100%;">
                                    <div class="bottom_left_top">
                                        <div style="width: 100%;height: 100%;position: relative">
                                            <label style="width: 15%;height: 55%;position: absolute;left: 5%;top: 20%">质量块个数</label>
                                            <div style="width: 15%;height: 55%;position: absolute;left: 20%;top: 20%">
                                                <input v-model="params_20.mass_number" style="width: 100%;height: 100%;text-align: center"/>
                                            </div>
                                            <div style="width: 15%;height: 55%;position: absolute;left: 37.5%;top: 20%">
                                                <button @click="isvisible_3"
                                                        style="width: 100%;height: 100%;padding-left: 2px;padding-right: 2px;">添加质量块</button>
                                                <a-modal   v-for="(it,index) in visible_3" :key="it.id" v-model="visible_3[index].value" :title="myTitle_3(index+1)" @ok="handleOk_3(index+1)">
                                                    <ul style="height: 100%">
                                                        <li style="margin-bottom: 3%">
                                                            第{{index+1}}质量块距轴左端的距离(mm)<br>
                                                            <input v-model="temp_mass[0]"  style="width: 90%" type="text"/>

                                                        </li>
                                                        <li style="margin-bottom: 3%">
                                                            第{{index+1}}质量块的质量(t)<br>
                                                            <input v-model="temp_mass[1]"  style="width: 90%" type="text"/>
                                                        </li>
                                                        <li style="margin-bottom: 3%">
                                                            第{{index+1}}质量块直径转动惯量(t.mm2)<br>
                                                            <input v-model="temp_mass[2]"  style="width: 90%" type="text"/>
                                                        </li>
                                                        <li style="margin-bottom: 3%">
                                                            第{{index+1}}质量块极转动惯量(t.mm2)<br>
                                                            <input v-model="temp_mass[3]"  style="width: 90%" type="text"/>
                                                        </li>
                                                    </ul>
                                                </a-modal>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bottom_left_bottom">
                                        <div style="width: 100%;height: 100%;position: relative">
                                            <div class="bottom_left_bottom_left">
                                                <div style="width: 100%;height: 100%;position: relative">
                                                    <div class="bottom_left_bottom_left_body">质量块</div>
                                                </div>
                                            </div>
                                            <div class="bottom_left_bottom_right">
                                                <div class="bottom_left_bottom_right_table">
                                                    <el-table
                                                            height="170" border  stripe
                                                            :data="ans.dataSource2"
                                                            :row-style="{height:'15px'}"
                                                            :cell-style="{padding:'0px'}"
                                                            :header-cell-style="{height:'10px',padding:'0px'}"
                                                            style="width: 95%;height: 100%;font-size: 10px;">
                                                        <el-table-column
                                                                prop="0" label="序号" width="70" >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="1" label="网格面" width="70" h>
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="2" label="质量(t)" width="70" >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="3" label="直径转动惯量(t.mm2)" width="150" >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="4" label="极转动惯量(t.mm2)" width="150" >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="5" label="位置(mm)" >
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                                <div class="bottom_left_bottom_right_button">
                                                    <div  style="width: 100%;height: 100%;position: relative">
<!--                                                        <button style="width: 20%;height: 70%;position: absolute;right: 5%;padding-left: 2px;padding-right: 2px;">计算质量块</button>-->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom_right">
                        <div style="width: 100%;height: 100%;position: relative">
                            <div class="bottom_right_top">
                                <div style="width: 100%;height: 100%;position: relative">
                                    <label style="width: 30%;height: 90%;position:absolute;right: 10%">红色代表轴承，青色代表质量块</label>
                                </div>
                            </div>
                            <div class="bottom_right_body">
                                <div style="width: 100%;height: 100%;">
                                    <div class="bottom_right_title">轴的临界转速计算</div>
                                    <div class="bottom_right_main">
                                        <div style="width: 100%;height: 100%;position: relative">
                                            <div class="bottom_right_left">
                                                <div class="bottom_right_left_top">
                                                    <div style="width: 100%;height: 100%;position: relative">
                                                        <label style="width: 30%;height: 30%;position: absolute;top: 30%;left: 5%">计算阶次</label>
                                                        <input v-model="params_20.rank" style="width: 40%;height: 30%;position: absolute;top: 30%;left: 40%;text-align: center"/>
                                                    </div>
                                                </div>
                                                <div class="bottom_right_left_bottom">
                                                    <div style="width: 100%;height: 100%;position: relative">
                                                        <button @click="calculate"
                                                                style="width: 40%;height: 30%;position: absolute;top: 0%;left: 40%;font-size: 15px;padding-left: 2px;padding-right: 2px;">临界转速计算</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bottom_right_right">
                                                <div style="width: 100%;height: 100%;position: relative">
                                                    <el-table
                                                            height="110" border  stripe
                                                            :data="ans.dataSource3"
                                                            :row-style="{height:'15px'}"
                                                            :cell-style="{padding:'0px'}"
                                                            :header-cell-style="{height:'10px',padding:'0px'}"
                                                            style="width: 85%;height: 100%;font-size: 10px;position: absolute;top: 15%;left: 10%">
                                                        <el-table-column
                                                                prop="0" label="阶次" width="90" >
                                                        </el-table-column>
                                                        <el-table-column
                                                                prop="1" label="转速(rpm)" >
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a-row>
    </div>
</template>

<script>

    import {speed, toString_} from "../../../api/file";

    export default {
        created () {
            document.title = '轴的临界转速计算'
            this.$store.state.file.key = 20
        },
        name: "critical_rotate_speed",
        data(){
            return{
                params_20:this.$store.state.file.dataList[20],
                // this.$store.state.file.dataList[20]:{
                //     section_n: "3",
                //     elastic: "206000",
                //     possion_ratio: "0.3",
                //     bearing_number: "2",
                //     mass_number: "1",
                //     rank: "2",
                // },
                visible:false,
                confirmLoading:false,
                ans:{
                    dataSource:[],
                    dataSource1:[],
                    dataSource2:[],
                    dataSource3:[],
                },

                visible_1:[{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false}],
                visible_2:[{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false}],
                visible_3:[{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false},{value:false}],
                temp_shaft_segment:[],//临时的轴尺寸数组
                //temp_shaft_segment_array:[],
                temp_bearing:[],//临时的轴承数组
                temp_mass:[],//临时的质量块数组
                shaft_segment1:[],
                bearing1:[],
                mass1:[],
                shaft_segment_copy:[],
                bearing_copy:[],
                mass_copy:[],
            }
        },
        methods: {
            copyArr(arr){   //深拷贝
                var res=new Array(new Array(arr.length))
                for(var i=0;i<arr.length;i++){
                    res[i]=new Array(arr[i].length)
                    for(var j=0;j<arr[i].length;j++){
                        res[i][j]=arr[i][j]
                    }
                    // res.push(arr[i])
                }
                return res
            },
            showModal(){ //查看轴尺寸数组
                this.visible=true;
                this.shaft_segment_copy=this.copyArr(this.shaft_segment1)
                for(var i=0;i<this.params_20.section_n;i++){
                    this.shaft_segment_copy[i].splice(3,1)
                    this.shaft_segment_copy[i].splice(0,0,i+1)
                    this.shaft_segment_copy[i].splice(4,0,this.params_20.elastic)
                    this.shaft_segment_copy[i].splice(5,0,this.params_20.possion_ratio)
                    this.shaft_segment_copy[i].splice(7,0,i+1)
                    this.shaft_segment_copy[i][8]=this.shaft_segment_copy[i][8]*(1.0000000E9)
                }
                this.ans.dataSource=this.copyArr(this.shaft_segment_copy)
                //this.shaft_segment1=[]
            },
            handleOk(){
                this.confirmLoading=true;
                setTimeout(() => {
                        this.visible=false;
                        this.confirmLoading=false;
                    }
                );
                this.shaft_segment1=[]
            },
            handleCancel(){
                this.visible=false;
            },
            myTitle_1(i){
               return "第"+i+"个轴参数"
            },
            myTitle_2(i){
                return "第"+i+"个轴承"
            },
            myTitle_3(i){
                return "第"+i+"个质量块"
            },
            isvisible_1(){  //点击按钮时的 @click 方法
                this.visible_1[0].value = true
            },
            isvisible_2(){  //点击按钮时的 @click 方法
                this.visible_2[0].value = true
            },
            isvisible_3(){  //点击按钮时的 @click 方法
                this.visible_3[0].value = true
            },
            handleOk_1:function(it){  //循环弹出数组时 点击确定的效果
                //console.log(it)
                if(it < this.params_20.section_n) { //改成自己输入的那个数值对应的变量
                    this.visible_1[it-1].value = false
                    this.visible_1[it].value = true
                }else{
                    this.visible_1[it-1].value = false
//使用完 vuex 中的 visibles 后，一定要全部赋值为false
                    for(let i = 0;i < this.visible_1.length;i++){
                        this.visible_1[i].value = false
                    }
                }
                this.shaft_segment1.push(this.temp_shaft_segment)
                this.temp_shaft_segment=[]

                if(it >= this.params_20.section_n){
                    this.params_20.shaft_segment=toString_(this.shaft_segment1)
                }
            },
            handleOk_2:function(it){  //循环弹出数组时 点击确定的效果
                if(it < this.params_20.bearing_number) { //改成自己输入的那个数值对应的变量
                    this.visible_2[it-1].value = false
                    this.visible_2[it].value = true
                }else{
                    this.visible_2[it-1].value = false
//使用完 vuex 中的 visibles 后，一定要全部赋值为false
                    for(let i = 0;i < this.visible_2.length;i++){
                        this.visible_2[i].value = false
                    }
                }
                this.bearing1.push(this.temp_bearing)
                this.temp_bearing=[]

                if(it >= this.params_20.bearing_number){ //数据加载到轴承表并显示
                    console.log("bearing1",this.bearing1)
                    this.bearing_copy=this.copyArr(this.bearing1)
                    this.params_20.bearing=toString_(this.bearing1)
                    for(var i=0;i<this.params_20.bearing_number;i++){
                        this.bearing_copy[i].splice(0,1)
                        this.bearing_copy[i].splice(0,0,0)   //网格数
                        this.bearing_copy[i].splice(0,0,i+1)  //序号
                        this.bearing_copy[i].splice(4,0,this.bearing1[i][0])
                    }

                    this.ans.dataSource1=this.copyArr(this.bearing_copy)   //赋值
                    this.bearing1=[]
                }
            },
            handleOk_3:function(it){  //循环弹出数组时 点击确定的效果
                //console.log(it)
                if(it < this.params_20.mass_number) { //改成自己输入的那个数值对应的变量
                    this.visible_3[it-1].value = false
                    this.visible_3[it].value = true
                }else{
                    this.visible_3[it-1].value = false
//使用完 vuex 中的 visibles 后，一定要全部赋值为false
                    for(let i = 0;i < this.visible_3.length;i++){
                        this.visible_3[i].value = false
                    }

                }
                this.mass1.push(this.temp_mass)
                this.temp_mass=[]

                if(it >= this.params_20.mass_number){ //数据加载到质量块表并显示
                    this.mass_copy=this.copyArr(this.mass1)
                    this.params_20.mass=toString_(this.mass1)
                    for(var i=0;i<this.params_20.mass_number;i++){
                        this.mass_copy[i].splice(0,1)
                        this.mass_copy[i].splice(0,0,0)   //网格数
                        this.mass_copy[i].splice(0,0,i+1)  //序号
                        this.mass_copy[i].splice(5,0,this.mass1[i][0])
                    }
                    this.ans.dataSource2=this.copyArr(this.mass_copy)
                    this.mass1=[]
                }
            },
            calculate() {
                if(this.$store.state.file.dataList[20].shaft_segment ==''){
                    alert("轴参数为空")
                }else if(this.$store.state.file.dataList[20].bearing ==''){
                    alert("轴承参数为空")
                }else if(this.$store.state.file.dataList[20].mass ==''){
                    alert("质量块参数为空")
                }else{
                    console.log(this.$store.state.file.dataList[20])
                    console.log("dataSource_1",this.ans.dataSource1)
                    // console.log("shaft_segment1",this.shaft_segment1)
                    // console.log("bearing1",this.bearing1)
                    // console.log("mass1",this.mass1)

                    speed(this.$store.state.file.dataList[20]).then(res => {
                            console.log(res)
                            this.ans.dataSource3 = this.MyStringToTable(res[0]); //计算数组
                            this.ans.dataSource1 = this.MyStringToTable(res[1]); //轴承数组
                            this.ans.dataSource2 = this.MyStringToTable(res[2]); //质量块数组
                        }
                    ).catch(err => {
                        this.$message.error(err.message);
                    })

                    this.shaft_segment1=[]
                    this.bearing1=[]
                    this.mass1=[]
                }

            },
            MyStringToTable(str){ //src为字符串，len为表的宽度
                    var arr1=str.split("\n")
                var arr2=new Array(arr1.length)
                var k=0
                for(var i=0;i<arr1.length;i++){
                    k=0
                    var temp=new Array(3)
                        temp=arr1[i].split(" ");
                    arr2[i]=new Array(temp.length)
                    for(var j=0;j<temp.length;j++){
                        arr2[i][j]=temp[j]
                    }
                    for(j=0;j<arr2[i].length;j++){
                        if(arr2[i][j]==""){
                            arr2[i].splice(j,1)
                            j=j-1
                        }
                    }
                }
                return arr2
            },
        }
    }
</script>

<style scoped>
    ul,ol,li{
        list-style: none;
    }
    .all_row{
        width: 100%;
        height: 100%;
        background-color: rgba(213, 213, 213, 0.349019607843137);
    }
    .top{
        width: 100%;
        height: 58%;
    }
    .top_left{
        width: 40%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_left_top{
        width: 100%;
        height: 31.25%;
        border: 1px solid #dddddd;
    }
    .top_left_top_title{
        width: 100%;
        height: 17%;
        background-color: rgba(215,215,215,1);
    }
    .top_left_top_body{
        width: 100%;
        height: 83%;
    }
    .top_left_top_left{
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_left_top_left_left{
        width: 55%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_left_top_left_left_list{
        width: 100%;
        height: 100%;
        position: absolute;
        right: 5%;
        top: 5%;
        text-align: right;
    }
    .top_left_top_left_left_list li{
        width: 100%;
        height: 33.3%;
    }
    .top_left_top_left_right{
        width: 45%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_left_top_left_right_list{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 5%;
        top: 5%;
        text-align: left;
    }
    .top_left_top_left_right_list li{
        width: 100%;
        height: 33.3%;
    }
    .top_left_top_right{
        width: 50%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_left_top_right_body{
        width: 100%;
        height: 30%;
        position: absolute;
        top: 40%;
        left: 0;
    }
    .top_left_bottom{
        width: 100%;
        height: 68.75%;
        border: 1px solid #dddddd;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .top_left_bottom_title{
        width: 100%;
        height: 10%;
        background-color: rgba(215,215,215,1);
    }
    .top_left_bottom_body{
        width: 100%;
        height: 90%;
    }
    .top_left_bottom_top{
        width: 100%;
        height: 20%;
    }
    .top_left_bottom_bottom{
        width: 100%;
        height: 80%;
    }
    .top_left_bottom_bottom_left{
        width: 15%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .top_left_bottom_bottom_left_label{
        width: 100%;
        height: 15%;
        position: absolute;
        right: 5%;
        top: 40%;
        text-align: right;
    }
    .top_left_bottom_bottom_right{
        width: 85%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .top_left_bottom_bottom_right_table{
        width: 100%;
        height: 83.3%;
    }
    .top_left_bottom_bottom_right_button{
        width: 100%;
        height: 16.7%;
    }
    .top_middle{
        width: 4%;
        height: 100%;
        position: absolute;
        left: 40%;
    }
    .top_right{
        width: 56%;
        height: 100%;
        position: absolute;
        left: 44%;
        background-color: white;
        border: 1px solid #dddddd;
    }
    .bottom{
        width: 100%;
        height: 42%;
    }
    .bottom_left{
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
        border: 1px solid #dddddd;
    }
    .bottom_left_title{
        width: 100%;
        height: 10%;
        background-color: rgba(215,215,215,1);
    }
    .bottom_left_body{
        width: 100%;
        height: 90%;
    }
    .bottom_left_top{
        width: 100%;
        height: 20%;
    }
    .bottom_left_bottom{
        width: 100%;
        height: 80%;
    }
    .bottom_left_bottom_left{
        width: 10%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .bottom_left_bottom_left_body{
        width: 100%;
        height: 15%;
        position: absolute;
        top: 40%;
        right: 5%;
        text-align: right;
    }
    .bottom_left_bottom_right{
        width: 90%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .bottom_left_bottom_right_table{
        width: 100%;
        height: 85%;
    }
    .bottom_left_bottom_right_button{
        width: 100%;
        height: 15%;
    }
    .bottom_right{
        width: 50%;
        height: 100%;
        position: absolute;
        right: 0;
    }
    .bottom_right_top{
        width: 100%;
        height: 10%;
    }
    .bottom_right_body{
        width: 70%;
        height: 70%;
        position: absolute;
        bottom: 0%;
        left: 3%;
        border: 1px solid #dddddd;
    }
    .bottom_right_title{
        width: 100%;
        height: 10%;
        background-color: rgba(215,215,215,1);
    }
    .bottom_right_main{
        width: 100%;
        height: 90%;
    }
    .bottom_right_left{
        width: 43%;
        height: 100%;
        position: absolute;
        left: 0;
    }
    .bottom_right_left_top{
        width: 100%;
        height: 50%;
    }
    .bottom_right_left_bottom{
        width: 100%;
        height: 50%;
    }
    .bottom_right_right{
        width: 57%;
        height: 100%;
        position: absolute;
        right: 0;
    }
</style>